import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import Util from '../../common/util';
import Ajax from '../../common/ajax';
import {InputNumber, Slider, Radio, Button, Collapse, Input, Icon, Checkbox, Modal, Select, message} from 'antd';
import SlideInput from '../../common/SlideInput/index';

const RadioGroup = Radio.Group;
const Panel = Collapse.Panel;
const Option = Select.Option;

class TabBarOpts extends BaseOpts {

    static defaultProps = {
        data: {
            dataset: {}
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,

            visible: false,
            iconList: [
                {
                    icon: 'index',
                    uid: Util.getUId(),
                },
                {
                    icon: 'cart',
                    uid: Util.getUId(),
                },
                {
                    icon: 'mine',
                    uid: Util.getUId(),
                },
                {
                    icon: 'find',
                    uid: Util.getUId(),
                },
                {
                    icon: 'know',
                    uid: Util.getUId(),
                },
                {
                    icon: 'cate',
                    uid: Util.getUId(),
                }

            ],
            pageList: []
        };
    }

    render() {
        var _self = this;
        var {data, iconList, pageList} = this.state;
        var {dataset} = data;
        var {tabBar, tabBarMap, status = '1'} = dataset;

        return (
            <div className="optsPanel tabBarOpts">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">状态</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <RadioGroup onChange={(e) => {
                                this.$dataChange('status', e.target.value, 'dataset');
                            }} defaultValue={status}>
                                <Radio value={'1'}>启用</Radio>
                                <Radio value={'0'}>禁用</Radio>
                            </RadioGroup>
                        </div>
                    </div>
                </div>
                {
                    status == '1' ?
                        <div className="tabBarOpts__add">
                            <Button type="primary" size="large" onClick={_self._addTabBar.bind(_self)}>添加</Button>
                        </div>
                        :
                        null
                }
                {
                    status == '1' ?
                        <div className="tabBarOpts__content">
                            <Collapse accordion>
                                {
                                    tabBar.list.map(function (item, index) {
                                        var iconName = item.iconPath.match(/([^/]+)\.png$/)[1];
                                        var arr = item.pagePath.match(/tabPage(\d)/);
                                        var customPId = '';

                                        if (arr) {
                                            customPId = tabBarMap[arr[0]] || '';
                                        }

                                        return (
                                            <Panel
                                                header={
                                                    <div className="panelHeader">
                                                        <span className="panelHeader__title">{item.text}</span>
                                                        <div className="panelHeader__right">
                                                            {
                                                                item._original && index == 0 ?
                                                                    null
                                                                    :
                                                                    <span>
                                                                {
                                                                    index > 1 ?
                                                                        <Icon
                                                                            onClick={(e) => {
                                                                                e.stopPropagation();
                                                                                _self._moveSort('up', item);
                                                                            }}
                                                                            type="arrow-up"
                                                                        />
                                                                        :
                                                                        null
                                                                }
                                                                        {
                                                                            index < tabBar.list.length - 1 ?
                                                                                <Icon
                                                                                    onClick={(e) => {
                                                                                        e.stopPropagation();
                                                                                        _self._moveSort('down', item);
                                                                                    }}
                                                                                    type="arrow-down"
                                                                                />
                                                                                :
                                                                                null
                                                                        }
                                                            </span>
                                                            }

                                                            {
                                                                !item._original ?
                                                                    <Icon
                                                                        onClick={(e) => {
                                                                            e.stopPropagation();
                                                                            _self._delTabBar(item);
                                                                        }}
                                                                        type="delete"
                                                                    />
                                                                    :
                                                                    (
                                                                        index > 0 ?
                                                                            <Checkbox
                                                                                checked={!item._deleted}
                                                                                onChange={(e) => {
                                                                                    _self._startUseTabBar(e.target.checked, item)
                                                                                }}
                                                                                onClick={(e) => {
                                                                                    e.stopPropagation();
                                                                                }}
                                                                            >
                                                                                启用
                                                                            </Checkbox>
                                                                            : null
                                                                    )
                                                            }
                                                        </div>
                                                    </div>
                                                }
                                                key={index}
                                                disabled={item._deleted}
                                            >
                                                <div className="tabBarOptsItem">
                                                    <dl className="tabBarOptsItem__options">
                                                        <dt>文字</dt>
                                                        <dd>
                                                            <Input defaultValue={item.text} onInput={(e) => {
                                                                item.text = e.target.value;
                                                                _self.$dataChange('tabBar', tabBar, 'dataset');
                                                            }}/>
                                                        </dd>
                                                        <dt>图片</dt>
                                                        <dd>
                                                    <span className="tabBarOptsItem__icon"
                                                          style={{backgroundImage: 'url(http://img.taojinzi.com/xcx/admin/imgs/tabs/' + iconName + '.png)'}}></span>
                                                            <span className="tabBarOptsItem__icon"
                                                                  style={{backgroundImage: 'url(http://img.taojinzi.com/xcx/admin/imgs/tabs/' + iconName + '-sel.png)'}}></span>
                                                            <Button type="primary" size="small"
                                                                    onClick={_self._selectImg.bind(_self, item)}>选择</Button>
                                                        </dd>
                                                        {
                                                            !item._original ?
                                                                <dt>连接至</dt>
                                                                : null
                                                        }
                                                        {
                                                            !item._original ?
                                                                <dd>
                                                                    <Select value={customPId} style={{width: 120}}
                                                                            onChange={(pId) => {
                                                                                _self._selectPage(item, pId)
                                                                            }}>
                                                                        <Option value="">请选择</Option>
                                                                        {
                                                                            pageList.map(function (page) {
                                                                                return (
                                                                                    <Option
                                                                                        key={'page_' + page.id}
                                                                                        value={page.id}
                                                                                    >{page.name}</Option>
                                                                                )
                                                                            })
                                                                        }
                                                                    </Select>
                                                                </dd>
                                                                : null
                                                        }
                                                    </dl>
                                                </div>
                                            </Panel>
                                        )
                                    })
                                }
                            </Collapse>
                        </div>
                        :
                        null
                }

                <Modal
                    title="选择图标"
                    visible={_self.state.visible}
                    onOk={this._selectImgOk.bind(this)}
                    onCancel={this._selectImgCancel.bind(this)}
                >
                    <ul className="iconList">
                        {
                            iconList.map(function (iconItem) {
                                return (
                                    <li className="iconItem" onClick={_self._selectIcon.bind(_self, iconItem)}
                                        key={iconItem.uid}>
                                        <div className="iconItem__checkbox">
                                            <Checkbox
                                                checked={iconItem._selected}
                                                onChange={(e) => {
                                                    _self._selectIcon(iconItem, e.target.checked)
                                                }}
                                            >
                                            </Checkbox>
                                        </div>
                                        <div className="iconItem__imgs">
                                            <span
                                                className="iconItem__img"
                                                style={{backgroundImage: 'url(http://img.taojinzi.com/xcx/admin/imgs/tabs/' + iconItem.icon + '.png)'}}
                                            ></span>
                                            <span
                                                className="iconItem__img"
                                                style={{backgroundImage: 'url(http://img.taojinzi.com/xcx/admin/imgs/tabs/' + iconItem.icon + '-sel.png)'}}
                                            ></span>
                                        </div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </Modal>
            </div>
        );
    }

    _selected(linkData, linkType) {
        var data = this.state.data;

        data['dataset']['linkData'] = linkData;
        data['dataset']['linkType'] = linkType;

        this.setState({
            data
        });

        this.props.dataChange && this.props.dataChange(data);
    }

    componentDidMount() {
        this._getPageList();
    }

    _getPageList() {
        var _self = this;

        Ajax.G('/admin/Home/getPageList', {}, function (res) {
            var pageList = res.result.pageList;

            pageList = pageList.map(function (p) {
                return {
                    name: p.page_type == 0 ? '首页' : p.page_name,
                    id: p.id,
                    type: p.page_type,
                    state: p.state,
                };
            });

            _self.setState({
                pageList
            })
        });
    }

    _addTabBar() {
        var {dataset} = this.state.data;
        var {tabBar} = dataset;
        var maxPageNum = 0;
        var pageAmount = 0; //标签数量

        tabBar.list.forEach(function (item) {
            var arr = item.pagePath.match(/tabPage(\d)/);

            if (!item._deleted) {
                pageAmount++;
            }
            if (arr && arr[1] > maxPageNum) {
                maxPageNum = arr[1];
            }
        })

        if (pageAmount >= 5) {
            message.error('标签数量最多5个');
            return;
        }

        tabBar.list.push({
            "pagePath": "pages/tabPage" + (++maxPageNum) + "/index",
            "iconPath": "./images/tabs/index.png",
            "selectedIconPath": "./images/tabs/index-sel.png",
            "text": "标签",
            "_original": false,
            "_uid": Util.getUId()
        });
        this.$dataChange('tabBar', tabBar, 'dataset');
    }

    _delTabBar(item) {
        var {dataset} = this.state.data;
        var {tabBar} = dataset;

        tabBar.list.some(function (bar, index) {
            if (bar._uid == item._uid) {
                tabBar.list.splice(index, 1);
                return true;
            }
        });
        this.$dataChange('tabBar', tabBar, 'dataset');
    }

    _startUseTabBar(flag, item) {
        var {dataset} = this.state.data;
        var {tabBar} = dataset;

        item._deleted = !flag;

        this.$dataChange('tabBar', tabBar, 'dataset');
    }

    _selectImg(barItem) {
        this._curBarItem = barItem;
        this.setState({
            visible: true,
        });
    }

    _selectImgOk() {
        var {iconList, data} = this.state;
        var {tabBar} = data.dataset;
        var selectedIcon;

        iconList.some(function (iconItem) {
            if (iconItem._selected) {
                selectedIcon = iconItem;
                return true;
            }
        });

        this._curBarItem.iconPath = this._curBarItem.iconPath.replace(/[^/]+\.png$/, selectedIcon.icon + '.png');
        this._curBarItem.selectedIconPath = this._curBarItem.selectedIconPath.replace(/[^/]+\.png$/, selectedIcon.icon + '-sel.png');

        this.setState({
            visible: false
        });
        this.$dataChange('tabBar', tabBar, 'dataset');
    }

    _selectImgCancel() {
        this.setState({
            visible: false
        });
    }

    _selectIcon(iconItem, flag) {
        var {iconList} = this.state;

        iconList.forEach(function (item) {
            item._selected = item.uid == iconItem.uid;
        })

        this.setState({
            iconList
        })
    }

    _moveSort(ty, item) {
        var {data} = this.state;
        var {tabBar} = data.dataset;

        tabBar.list.some(function (barItem, index) {
            if (barItem._uid == item._uid) {
                if (ty == 'up') {
                    tabBar.list.splice(index - 1, 0, tabBar.list.splice(index, 1)[0]);
                } else {
                    tabBar.list.splice(index + 1, 0, tabBar.list.splice(index, 1)[0]);
                }
                return true;
            }
        })

        this.$dataChange('tabBar', tabBar, 'dataset');
    }

    _selectPage(barItem, pageId) {
        var {data} = this.state;
        var {tabBarMap} = data.dataset;
        var arr = barItem.pagePath.match(/tabPage(\d)/);
        if (!arr) {
            return;
        }
        var barName = arr[0];

        tabBarMap[barName] = pageId;

        this.$dataChange('tabBarMap', tabBarMap, 'dataset');
    }
}

export default TabBarOpts;
